<template>
	<div class="article-lists">
		<el-card class="!border-none" shadow="never">
			<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
				<el-form-item label="key">
					<el-input class="w-[280px]" v-model="queryParams.title" clearable @keyup.enter="resetPage" />
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="resetPage">查询</el-button>
					<el-button @click="resetParams">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="!border-none mt-4" shadow="never">
			<div>
				<router-link v-perms="['systemGroup.systemGroup/add', 'systemGroup.systemGroup/add:edit']" :to="{
                        path: getRoutePath('systemGroup.systemGroup/add:edit')
                    }">
					<el-button type="primary" class="mb-4">
						<template #icon>
							<icon name="el-icon-Plus" />
						</template>
						添加数据
					</el-button>
				</router-link>
			</div>
			<el-table size="large" v-loading="pager.loading" :data="pager.lists">
				<el-table-column label="ID" prop="id" width="80" />
				<el-table-column label="KEY" prop="config_name" width="150" />
				<el-table-column label="组合数据名称" prop="name"  show-tooltip-when-overflow />
				<el-table-column label="简介" prop="info"  />
				<el-table-column label="操作" width="220" fixed="right">
					<template #default="{ row }">
						<el-button v-perms="['systemGroup/sonList']" type="primary" link>
							<router-link :to="{
							        path: getRoutePath('systemGroup.systemGroup/sonList'),
							        query: {
							            id: row.id
							        }
							    }">
								数据列表
							</router-link>
						</el-button>
						<el-button v-perms="['systemGroup.systemGroup/edit', 'systemGroup.systemGroup/add:edit']" type="primary" link>
							<router-link :to="{
                                    path: getRoutePath('systemGroup.systemGroup/add:edit'),
                                    query: {
                                        id: row.id
                                    }
                                }">
								编辑
							</router-link>
						</el-button>
						<el-button v-perms="['systemGroup/delete']" type="danger" link
							@click="handleDelete(row.id)">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="flex justify-end mt-4">
				<pagination v-model="pager" @change="getLists" />
			</div>
		</el-card>
	</div>
</template>
<script lang="ts" setup name="systemGroupLists">
	import { systemGroupLists,deleteSystem } from '@/api/systemGroup'
	import { usePaging } from '@/hooks/usePaging'
	import { getRoutePath } from '@/router'
	import feedback from '@/utils/feedback'
	const queryParams = reactive({
		title:'',
		
	})

	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: systemGroupLists,
		params: queryParams,
		size:10
	})

	// const { optionsData } = useDictOptions<{
	// 	article_cate : any[]
	// }>({
	// 	article_cate: {
	// 		api: addSystem
	// 	}
	// })

	// const changeStatus = async (is_show : any, id : number) => {
	// 	try {
	// 		await articleStatus({ id, is_show })
	// 		getLists()
	// 	} catch (error) {
	// 		getLists()
	// 	}
	// }

	const handleDelete = async (id : number) => {
		await feedback.confirm('确定要删除？')
		await deleteSystem({ id })
		getLists()
	}

	onActivated(() => {
		getLists()
	})

	getLists()
</script>